<template>
  <div class="avatar">
    <el-dropdown trigger="click" @command="onCommand">
      <div style="display: flex; align-items: center" class="el-dropdown-link">
        <el-avatar :size="28" :src="avatar" />
        <div class="name">{{ userName }}</div>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <template v-if="!isVisitor">
            <el-dropdown-item command="manage" :icon="DataAnalysis">
              后台管理
            </el-dropdown-item>
          </template>
          <el-dropdown-item
            :divided="!isVisitor"
            command="logout"
            :icon="SwitchButton"
          >
            退出系统
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import avatar from "@/assets/images/avatar.jpg";
import useUserStore from "@/store/modules/user";

import {
  DataAnalysis,
  Message,
  SwitchButton,
  Refresh,
  Warning,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { getToken } from "@/utils/auth";
import useSettingsStore from "@/store/modules/settings";

const userName = computed(() => useUserStore().nickName);
const router = useRouter();
const { proxy } = getCurrentInstance();
// 是否是游客
const isVisitor = computed(
  () =>
    useUserStore().roles.includes("visitor") && useUserStore().roles.length == 1
);

const alarmLightEquipVisible = ref(false);
const onCommand = (command) => {
  switch (command) {
    case "logout":
      proxy.$modal.confirm("是否退出系统？").then((res) => {
        useUserStore()
          .logOut()
          .then((res) => {
            window.location.reload();
          });
      });
      break;
    case "manage":
      toPage("out", "/index");
      break;
    case "init":
      initialData();
      break;
    case "warning":
      console.log("warning....");
      alarmLightEquipVisible.value = true;
      break;
    default:
      break;
  }
};

const toPage = (type, path) => {
  // 跳转到后台管理系统
  let locationHost = ''
  if (window.location.hostname.includes('192') > 0) { // 192内网
    locationHost = 9008
  } else {
    locationHost = 2113
  }
  const token = getToken();
  const url = `http://${window.location.hostname}:${locationHost}/#/redirect${path}?token=${token}`;

  console.log("跳转目标地址",url)
  window.open(url, "_bank");
};
</script>

<style lang="scss" scoped>
.avatar {
  // position: absolute;
  // top: 4px;
  // right: 16px;
  display: flex;
  align-items: center;

  .name {
    color: #ffffff;
    max-width: 100px;
    margin-left: 8px;
    white-space: nowrap; /* 文字不换行 */
    overflow: hidden; /* 溢出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
  .el-dropdown-link:hover {
    cursor: pointer;
  }

  .name:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}
:deep(.el-badge) {
  --el-badge-font-size: 0.1rem;
  --el-badge-padding: 0.04rem;
  --el-badge-size: 0.14rem;
}
</style>
